<template>
    <div class="content">

        <el-dialog :title="this.addOrUpdate? '新增SQL' : '编辑SQL'" :close-on-click-modal="false" :visible.sync="visible" width="60%">
            <el-form ref="form" :model="form" label-width="auto">
                <el-form-item label="命名空间">
                    <el-input v-model="form.ns" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="数据源">
                    <el-input v-model="form.ds" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="名称空间">
                    <el-input v-model="form.mns" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="SQL类型">
                    <template v-if="addOrUpdate">
                        <el-select v-model="form.sqlType" clearable placeholder="请选择">
                            <el-option v-for="(item,index) in sqlTypes" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </template>
                    <template v-if="!addOrUpdate">
                        <el-input v-model="form.sqlType" :disabled="true"></el-input>
                    </template>
                </el-form-item>
                <el-form-item label="SQL标识">
                    <el-input v-model="form.sqlId" :disabled="!addOrUpdate"></el-input>
                </el-form-item>
                <el-form-item label="SQL语句">
                    <el-input type="textarea" autosize="{ minRows: 1 maxRows: 100}" v-model="form.sqlStatement"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="SQL调试">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <template v-if="form.delivery">
                    <el-form-item label="返回值类型">
                        <el-select v-model="form.sqlResponseMapper" clearable placeholder="请选择">
                            <el-option v-for="(item, index) in sqlResponseMappers" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-show="form.sqlResponseMapper == 'PAGE'" label="页码">
                        <el-input v-model="form.page"></el-input>
                    </el-form-item>
                    <el-form-item v-show="form.sqlResponseMapper == 'PAGE'" label="条数">
                        <el-input v-model="form.limit"></el-input>
                    </el-form-item>
                    <el-form-item label="params">
                        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 100}" v-model.trim="form.params" @blur="isJson(form.params)"></el-input>
                    </el-form-item>
                    <el-form-item label="return">
                        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 100}" v-model="form.data"></el-input>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button v-show="form.delivery" icon="el-icon-search" @click="handleTest">测试</el-button>
                    <el-button icon="el-icon-circle-plus" @click="handleSumbit">提交</el-button>
                    <el-button icon="el-icon-error" @click="visible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
    import { sqlAdd, sqlUpdate, sqlInfo,sqlTest } from '../../api/sql'
import Template from '../template/Template.vue'
    export default {
  components: { Template },
        data() {
            return {
                addOrUpdate: false,
                visible: false,
                sqlResponseMappers: ['MAP', 'MAP_LIST', 'PAGE'],
                sqlTypes: ['SELECT', 'INSERT', 'UPDATE', 'DELETE'],
                form: {
                    ns: '',
                    ds: '',
                    mns: '',
                    sqlType: 'SELECT',
                    sqlId: '',
                    sqlResponseMapper: 'MAP_LIST',
                    sqlStatement: '',
                    description: '',
                    params: '{}',
                    page: 1,
                    limit: 10,
                    data: '{}'
                }
            }
        },
        methods: {
            init(addOrUpdate, ns, ds, mns, sqlId) {
                this.form = {
                    ns: '',
                    ds: '',
                    mns: '',
                    sqlType: 'SELECT',
                    sqlId: '',
                    sqlStatement: '',
                    description: '',
                    delivery:false
                }
                this.form.ns = ns || 'public'
                this.form.ds = ds || ''
                this.form.mns = mns || ''
                this.form.sqlId = sqlId || ''
                this.addOrUpdate = addOrUpdate
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.form.resetFields()
                    if (!this.addOrUpdate) {
                        sqlInfo(this.form.ns, this.form.ds, this.form.mns, this.form.sqlId).then(res => {
                            this.form = res.data
                        })
                    }
                })
            },
            handleSumbit() {
                if (this.addOrUpdate) {
                    sqlAdd(this.form).then((res) => {
                        this.$message({
                            message: '新增成功！', type: 'success', duration: 800, onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                } else {
                    sqlUpdate(this.form).then((res) => {
                        this.$message({
                            message: '更新成功！', type: 'success', duration: 800, onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                }
            },
            handleTest(){
                this.form.data = ''
                if (this.form.sqlResponseMapper != 'PAGE') {
                    this.form.page = 1
                    this.form.limit = 10
                }
                this.isJson(this.form.params)
                let testform = {
                    ns: this.form.ns,
                    ds: this.form.ds,
                    mns: this.form.mns,
                    sqlId: this.form.sqlId,
                    page: this.form.page,
                    limit: this.form.limit,
                    sqlType: this.form.sqlType,
                    sqlStatement: this.form.sqlStatement,
                    sqlResponseMapper: this.form.sqlResponseMapper,
                    params: this.form.params === undefined || this.form.params === '' || this.form.params === null ? {} : JSON.parse(this.form.params)
                }
                sqlTest(testform).then((res) => {
                    this.form.data = window.JSON.stringify(res.data, null, 4)
                    this.$forceUpdate()
                })
            },
            isJson(str) {
                if (str) {
                    if (typeof str === 'string') {
                        try {
                            var obj = JSON.parse(str)
                            if (typeof obj === 'object' && obj) {
                                return true
                            } else {
                                this.$message.error('请检查参数的是否为JSON格式')
                            }
                        } catch (e) {
                            this.$message.error('请检查参数的是否为JSON格式')
                        }
                    }
                }
            },
        }
    }
</script>
<style scoped>
.content {
    margin: 20px 0px;
    font-size: 1em;
}
.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}

</style>
